<!-- 需求列表  -->
<template>
  <pageHeader
    title="产品工艺路线列表"
    :breadCrumb="['工厂建模', '产品工艺路线管理']"
  />

  <div class="search-box">
    <a-space>
      <ProductChoice @choice="choiceProductChoice" ref="refProductChoice" />
      <a-button type="outline" @click="resetting">
        <template #icon> <icon-refresh /> </template>重置
      </a-button>
    </a-space>

    <a-space>
      <a-button type="primary" @click="addDemand">
        <template #icon>
          <icon-plus />
        </template>
        产品工艺路线
      </a-button>
      <HeaderSettingCopy
        v-model:headerValues="headerValues"
        :defineHeaders="ProductProcessRouteHerders.herders"
        :type="ProductProcessRouteHerders.type"
      />
    </a-space>
  </div>
  <tableTurn style="padding: 0 10px" :tableData="getDemandAll" ref="tableRef">
    <a-table-column :width="70" align="center">
      <template #title> 序号 </template>
      <template #cell="{ rowIndex }">
        {{ rowIndex + 1 }}
      </template>
    </a-table-column>
    <a-table-column
      v-for="header in headerValues"
      :key="header.name"
      :width="header.width || 200"
      :title="header.name"
      :fixed="header.fixed"
      :data-index="header.code"
      align="center"
    >
      <template #cell="{ record }" v-if="!header.code">
        <template v-if="header.name === '状态'">
          {{ record.state }}
          <a-typography-text type="success" v-if="record.state === 1">
            启用
          </a-typography-text>
          <a-typography-text type="danger" v-if="record.state === 2">
            停用
          </a-typography-text>
        </template>
      </template>
    </a-table-column>
    <a-table-column :width="150" fixed="right" title="操作" align="center">
      <template #cell="{ record }">
        <a-space>
          <!-- <a-link @click="toHistory(record.productId)"> 版本管理 </a-link> -->
          <a-tooltip content="版本管理">
            <IconFont
              type="icon-banbenguanli"
              :size="26"
              :style="{
                marginRight: '10px',
                cursor: 'pointer',
              }"
              @click="toHistory(record.productId)"
            />
          </a-tooltip>
          <!-- <a-link @click="history(record.id)"> 新增版本 </a-link> -->
          <a-tooltip content="新增版本">
            <IconFont
              type="icon-add-def"
              :size="26"
              :style="{
                marginRight: '10px',
                cursor: 'pointer',
              }"
              @click="history(record.id)"
            />
          </a-tooltip>
          <!-- <a-link @click="copy(record.id)">复制</a-link> -->
          <a-tooltip content="复制">
            <IconFont
              type="icon-fuzhi"
              :size="26"
              :style="{
                marginRight: '10px',
                cursor: 'pointer',
              }"
              @click="copy(record.id)"
            />
          </a-tooltip>
          <!-- <a-link @click="edit(record.id, record.productName)">修改</a-link> -->
          <a-tooltip content="修改">
            <IconFont
              type="icon-edit"
              :size="26"
              :style="{
                marginRight: '10px',
                cursor: 'pointer',
              }"
              @click="edit(record.id, record.productName)"
            />
          </a-tooltip>

          <a-tooltip v-if="record.state !== 2" content="删除">
            <a-popconfirm
              content="是否删除该数据?"
              type="error"
              @ok="del(record.id)"
            >
              <IconFont
                type="icon-delete"
                :size="26"
                :style="{
                  marginRight: '10px',
                  cursor: 'pointer',
                }"
              />
            </a-popconfirm>
          </a-tooltip>
          <!-- <a-popconfirm
            v-if="record.state !== 2"
            content="是否删除该数据?"
            type="error"
            @ok="del(record.id)"
          >
            <a-link status="danger"> 删除 </a-link>
          </a-popconfirm> -->
        </a-space>
      </template>
    </a-table-column>
  </tableTurn>
</template>

<script lang="ts" setup>
  import { reactive, onMounted, ref, nextTick } from 'vue';
  import ProductChoice from '@/views/client-side/FactoryModeling/components/ProductChoice.vue';
  import { ProductProcessRouteHerders } from '@/utils/tableHerders';
  import { useRouter } from 'vue-router';
  import {
    GetProductProcessRoutePage,
    DelProductProcessRoute,
  } from '@/api/FactoryModeling';

  const router = useRouter();
  let searchForm = reactive<any>({});

  const tableRef = ref();
  const Search = () => {
    tableRef.value.loadData();
  };
  let choiceProductChoice = ({ id }: any) => {
    searchForm.productId = id;
    Search();
  };
  // 表格配置
  const args = reactive({
    stripe: false,
    rowSelection: {
      type: 'checkbox',
      showCheckedAll: true,
      onlyCurrent: false,
    },
    bordered: {
      headerCell: true,
    },
    rowKey: 'id', // 批量选择按钮 以合同名称来作为key
  });

  // 获取需求列表
  const getDemandAll = async (page: any) => {
    try {
      let res = await GetProductProcessRoutePage({
        ...page,
        ...searchForm,
        history: 1,
      });
      return Promise.resolve(res);
    } catch (err: unknown) {
      console.log(err);
    }
  };
  // getDemandAll();
  const addDemand = () => {
    router.push({ name: 'ProductProcessRouteDetails' });
  };

  // 编辑
  const edit = (id: number, productName: string) => {
    router.push({
      name: 'ProductProcessRouteDetails',
      query: { saveId: id, productName },
    });
  };
  let copy = (id: number) => {
    router.push({ name: 'ProductProcessRouteDetails', query: { copyId: id } });
  };

  let toHistory = (productId: any) => {
    router.push({
      name: 'ProductProcessRouteHistory',
      query: { productId },
    });
  };

  let refProductChoice = ref();
  const resetting = () => {
    searchForm.productId = null;
    refProductChoice.value.inputValue = '';
    tableRef.value.refreshPaging();
    tableRef.value.loadData();
  };
  const del = async (id: number) => {
    await DelProductProcessRoute({ id });
    tableRef.value.loadData();
  };
  let headerValues = ref<any[]>([]);
</script>

<style scoped lang="less">
  .search-box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 10px;
    margin-top: -7px;
  }

  .use-state {
    display: flex;
    justify-content: center;
    text-align: center;
    .cycle {
      position: relative;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      content: '';
      display: inline-block;
      top: 3px;
      right: 10px;
    }
  }

  .greyColor {
    color: #c9cdd4;
  }
  .greyColor-cycle {
    background-color: #c9cdd4;
  }

  // 审核中、执行中
  .blueColor {
    color: #156dff;
  }
  .blueColor-cycle {
    background-color: #156dff;
  }

  // 已通过
  .greenColor {
    color: #31c273;
  }
  .greenColor-cycle {
    background-color: #31c273;
  }

  // 不通过
  .redColor {
    color: #f53f3f;
  }
  .redColor-cycle {
    background-color: #f53f3f;
  }
</style>
